<template>
	<div
		class="system-store-container"
		id="system-store-container"
		:style="[{ 'overflow-x': 'hidden' }, { height: screenHeight + 'px' }, { '--docHeight': state.height + 'px' }]"
	>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane v-for="r in dataContext.areaData" :key="r.id" :label="r.code + r.name" :name="r.id">
				<GuiA :row="row" :id="r.id" :isShow="state.isShow" :code="r.code" :isInOut="isInOut" v-if="activeName == r.id"></GuiA>
			</el-tab-pane>
		</el-tabs>
		<div class="nav-op" v-show="state.isShow">
			<img src="/images/add.png" @click="generateGuiArea(0)" />
			<img src="/images/edit.png" @click="generateGuiArea(1)" />
			<img src="/images/del.png" @click="delArea" />
		</div>

		<GuiArea ref="guiArea" @reload="queryArea"></GuiArea>
	</div>
</template>
<script lang="ts">
import { ref, toRefs, reactive, computed } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useStore } from '/@/store/index';
import GuiA from './component/guiA.vue';
import GuiArea from './component/gui_area.vue';
import { queryByOrgan, del } from '/@/api/store/area';

export default {
	name: 'systemStore',
	components: { GuiA, GuiArea },
	props: { isShow: Number, height: { type: Number, default: 0 }, isInOut: { type: Number, default: 0 } },
	setup(props, context) {
		const store = useStore();

		const state = reactive({
			screenHeight: document.body.clientHeight - 120,
			height: parseInt(props.height) + 180,
			isShow: props.isShow == 1 ? false : true,
			activeName: 'first',
			guiCreate1: ref(),
			guiArea: ref(),
			isInOut: props.isInOut,
		});

		const dataContext = reactive({ areaData: null });

		queryArea();

		//查询所有区域
		async function queryArea() {
			await queryByOrgan().then((res: any) => {
				if (res.success) {
					dataContext.areaData = res.data;
					if (res.data.length > 0) {
						var cdata = res.data[0];
						state.activeName = cdata.id;
					}
				}
			});
		}

		//添加区域
		const generateGuiArea = (t) => {
			var _id = state.activeName;
			if (t == 0) {
				_id = 0;
			}
			state.guiArea.openDialog(_id);
		};

		async function delArea() {
			await ElMessageBox.confirm('是否刪除?')
				.then(() => {
					del({ id: state.activeName }).then((res: any) => {
						if (res.success) {
							queryArea();
							ElMessage({
								message: '操作成功',
								type: 'success',
							});
						}
					});
				})
				.catch(() => {});
		}

		return {
			state,
			delArea,
			queryArea,
			dataContext,
			generateGuiArea,
			...toRefs(state),
		};
	},
};
</script>
<style scoped>
.system-store-container {
	background-color: white;
	padding-left: 15px;
	position: relative;
	min-height: 300px;
	overflow: hidden;
	border: 0px solid red;
}
.nav-op {
	position: absolute;
	right: 15px;
	top: 5px;
	width: 70;
	font-size: 18px;
}
.nav-op img {
	margin-right: 5px;
	width: 30px;
	height: 30px;
	cursor: pointer;
}

/deep/.el-tabs__content {
	height: calc(100vh - var(--docHeight));
	min-height: 300px;
	overflow-y: auto;
}
</style>
